import React,{Component} from 'react';
import {connect} from 'react-redux';

import {fetchComments,subComment} from '../actions/counter';

import "./../Sass/comments.scss";

class Comment extends Component{
    componentWillMount(){
        const pid = this.props.data_news[this.props.params.indexl]._id;
        // var pid = this.props.params.pid;
        this.props.fetchComments(pid);
    }
    render(){

        var self = this;
        //function
        // console.log(this.props.data_news);

        function subWords(){
            var username = $("#uname").val();
            var userwords = $("#uwords").val();
            if(username && userwords){
                var subJson = {
                    name:username,
                    words:userwords,
                    belongid:self.props.data_news[self.props.params.indexl]._id
                }
                
                self.props.subComment(subJson);
                $("#uname")[0].value = "";
                $("#uwords")[0].value = "";
            }
        }



        //定义本条新闻的内容
        var indexl= this.props.params.indexl;
        var data_singleNews = this.props.data_news[indexl];
        const imgUrl = "http://localhost:3000/"+data_singleNews.picture;
        var newsMode = (
                <div id="sigNews">
                    <h2>{data_singleNews.title}</h2>
                    <p className="tip_follow"><span>笔者：{data_singleNews.author}</span><em>Date:{data_singleNews.date}</em></p>
                    <p className="newsCont">{data_singleNews.content}</p>
                    <div className="newsPic">
                        <img src={imgUrl} alt="newsPicture"/>
                    </div>
                    <p className="tip_end"><span>from:{data_singleNews.from}</span><span>评论数：{data_singleNews.comments}</span></p>
                </div>
        )
       //定义相关评论内容
       
       if(this.props.data_comments.length>0){
           //取到相关评论的内容，并且内容长度不为0
            console.log(this.props.data_comments);
            var commentsMode = this.props.data_comments.map(function(ele,index){
                return (
                    <div className="everyCom">
                        <p className="evePis"><span>{ele.name}</span>评论：&nbsp;<span>{ele.words}</span><b className="rightIcon">回复</b><span className="glyphicon glyphicon-heart rightIcon"></span></p>
                    </div>
                )
            })


       }



        return (
           
            <div id="comment">
                <div className="container">
                    {newsMode}
                    
                    <div className="commentsPart">
                        <h3>看了这新闻的穷屌丝们的瞎比比</h3>
                        {commentsMode}
                    </div>

                    <div className="myComment">
                        <h3>我也来扯犊子</h3>
                        <form id="mywords">
                            <div class="form-group">
                                <label for="uname">姓甚名谁：</label>
                                <input type="text" name="uname" class="form-control" id="uname" placeholder="叫啥子"/>
                            </div>
                            <div class="form-group">
                                <label for="uwords">口出狂言：</label>
                                <input type="text" name="words" class="form-control" id="uwords" placeholder="说点什么"/>
                            </div>
                            <button type="button" onClick={subWords}>一语惊人</button>
                        </form>
                    </div>
                </div>
                
            </div>
        )
    }
}

const getValue = (state)=>{
    return {
        data_news:state.dataNews,
        data_newsOri:state.dataNewsOri,
        data_comments:state.dataComments
    }
}

const cmtContent = connect(
    getValue,
    {fetchComments,subComment}
)(Comment)

module.exports = cmtContent;